<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/mui.css" />
		<script src="js/mui.js"></script>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">新闻</h1>
		</header>


		<!-- 下拉容器 -->
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">新闻1</li>
					<li class="mui-table-view-cell">新闻2</li>
				</ul>
			</div>
		</div>
		<script>
			mui.init({
			  pullRefresh : {
			    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			    down : {
					// 下拉的时候触发
					callback:fndown
				},
				up:{
					// 上拉的时候触发
					callback:fnup
				}
			  }
			});
			
			let htm =''
			
			function fndown(){
				// 模拟2秒后结束下拉刷新
				setTimeout(()=>{
					mui.ajax('newsData.json',{
				dataType:'json',//服务器返回json格式数据
				type:'get',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				headers:{'Content-Type':'application/json'},	              
				success:function(data){
					//服务器返回响应，根据响应结果，分析是否登录成功；
					console.log("请求数据成功为：",data)
					for(let i=0;i<data.length;i++){
						htm+= `<li class="mui-table-view-cell">${data[i].title}</li>`
					}
					mui('.mui-table-view-chevron')[0].innerHTML = htm
				},
				error:function(err){
					//异常处理；
					console.log(请求失败);
				}
			});
			
			
				mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
				console.log("下拉了，刷新结束");
				},2000)
			}
			
			
			
			
				
				
			function fnup(){
				console.log("上拉了")
				// 模拟2秒后结束下拉刷新
				setTimeout(()=>{
					mui('#refreshContainer').pullRefresh().endPullupToRefresh();
				},2000)
			}
			
			
			
			
		</script>




	</body>
</html>